<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>投票页面</title>
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
  <div id="app">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>投票页面</span>
      </div>
      <div v-for="candidate in candidates" :key="candidate.id" class="candidate">
        <el-row>
          <el-col :span="4">
            <el-image :src="candidate.image" :alt="candidate.name" fit="cover"></el-image>
          </el-col>
          <el-col :span="12">
            <h3>{{ candidate.name }}</h3>
            <p>票数: <span>{{ candidate.votes }}</span></p>
          </el-col>
          <el-col :span="8">
            <el-button type="primary" @click="vote(candidate.id)">投票</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
   <script>
    new Vue({
      el: '#app',
      data: {
        candidates: [
          {
            id: 1,
            name: '候选人1',
            image: 'https://example.com/candidate1.jpg',
            votes: 0
          },
          {
            id: 2,
            name: '候选人2',
            image: 'https://example.com/candidate2.jpg',
            votes: 0
          },
          {
            id: 3,
            name: '候选人3',
            image: 'https://example.com/candidate3.jpg',
            votes: 0
          }
        ]
      },
      methods: {
        vote(candidateId) {
          const candidate = this.candidates.find(c => c.id === candidateId);
          candidate.votes++;
          this.$message.success('投票成功！');
        }
      }
    });
  </script>
</body>
</html>
